import { batchValue } from ".";
import { tableActiveKey } from "./store";
import { columns, checkedRecord, tableConfig, tableData } from "./table";
export const modalVisible = ref(false);
export const modalLoading = ref(false);
export const modalTitle = ref("");
export const modalColumns = columns;
export const modalFormState = reactive({
  aaaa: [0, 4],
  bbbb: undefined,
  cccc: undefined,
  dddd: undefined,
  eeee: [],
  ffff: undefined,
});
const illegalOptions = [
  { label: "涉黄", value: 0 },
  { label: "暴恐涉政", value: 1 },
  { label: "图文广告", value: 2 },
  { label: "不良内容", value: 3 },
  { label: "其它", value: 4 },
];

const defineTable = tableConfig();
export const modalConfig = () => {
  const defineModal = {
    width: 800,
    loading: modalLoading,
    visible: modalVisible,
    maskClosable: true,
    title: modalTitle,
    formState: modalFormState,
    event: {
      cancel: () => (batchValue.value = undefined),
    },
    on: {
      async finish(values: any) {
        if (!tableData.value.length) {
          modalVisible.value = false;
          batchValue.value = undefined;
          return;
        }
        modalLoading.value = true;
        setTimeout(() => {
          modalLoading.value = false;
          modalVisible.value = false;
          batchValue.value = undefined;
        }, 300);
      },
    },

    slot: {
      formSlot: {
        footer: () => (
          <a-space
            size={8}
            align="center"
            style="display: flex;justify-content: center;"
          >
            <s-button type="primary">{$t("base.ok")}</s-button>
            <s-button>{$t("base.cancel")}</s-button>
          </a-space>
        ),
      },
      extra_form_item: () =>
        tableActiveKey.value === 0 ? (
          batchValue.value === 0 ? (
            <div class="mb16">
              <s-table {...defineTable} />
            </div>
          ) : (
            <div>
              <a-form-item label="违规类型" name="aaaa">
                <a-checkbox-group
                  v-model:value={modalFormState.aaaa}
                  name="checkboxgroup"
                  options={illegalOptions}
                />
              </a-form-item>
              <a-form-item
                label="说明"
                name="bbbb"
                vSlots={{
                  help: (
                    <i class="fs10">
                      违规原因说明，将以系统信息的形式通知内容发起者。
                    </i>
                  ),
                }}
              >
                <a-textarea
                  v-model:value={modalFormState.bbbb}
                  placeholder="请输入拒绝此次内容审核的原因，内容长度限制20字以内"
                  rows={3}
                  maxlength={20}
                  showCount
                />
              </a-form-item>

              <a-form-item
                label="处理建议"
                name="cccc"
                help={
                  <i class="fs10">处理建议，将有效引导用户进行违规内容改进。</i>
                }
              >
                <a-textarea
                  v-model:value={modalFormState.cccc}
                  placeholder="请输入拒绝此次内容审核处理建议，内容长度限制20字以内"
                  rows={3}
                  maxlength={20}
                  showCount
                />
              </a-form-item>

              <a-form-item label="结果惩罚" name="dddd">
                <a-space size={16}>
                  <a-select
                    placeholder="请选择惩罚结果"
                    style="width: 150px;"
                    v-model:value={modalFormState.dddd}
                    options={[
                      {
                        label: "封禁指定时间",
                        value: 0,
                      },
                      {
                        label: "警告和提示",
                        value: 1,
                      },
                    ]}
                  />
                  {modalFormState.dddd === 0 ? (
                    <>
                      封禁
                      <a-input-number
                        placeholder="请输入"
                        v-model:value={modalFormState.ffff}
                        min={0}
                        max={100}
                      />
                      天
                    </>
                  ) : null}
                  {modalFormState.dddd === 1 ? (
                    <a-range-picker
                      placeholder={["开始日期", "结束日期"]}
                      v-model:value={modalFormState.eeee}
                    />
                  ) : null}
                </a-space>
              </a-form-item>
            </div>
          )
        ) : (
          "施工中。。。"
        ),
    },
  };
  return defineModal;
};
